@extends('admin.base')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="create">添 加</button>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    <a class="layui-btn layui-btn-sm" lay-event="permission">设置权限</a>
                    <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
                </div>
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">
        layui.use(['layer','table'],function () {
            let layer = layui.layer;
            let table = layui.table;

            let dataTable = table.render({
                elem: '#dataTable',
                url: "/admin/api/roles",
                page: false,
                id:'d',
                cols: [[
                    {checkbox: true,fixed: true},
                    {field: 'id', title: 'ID', sort: true,width:80},
                    {field: 'name', title: '权限名称'},
                    {field: 'display_name', title: '展示名称'},
                    {field: 'updated_at', title: '更新时间'},
                    {fixed: 'right', width: 320,title:'操作', align:'center', toolbar: '#options'}
                ]]
            });

            table.on('tool(dataTable)', function(obj){
                let data = obj.data;
                let layEvent = obj.event;
                if(layEvent === 'edit'){
                    layer.open({
                        type:2,
                        title:'修改角色',
                        area:['500px','300px'],
                        content:'/admin/role/'+data.id
                    });
                }else if (layEvent === 'permission') {
                    let url = '/admin/role/'+data.id+'/permission';
                    let index = layer.open({
                        type:2,
                        title:'设置权限',
                        maxmin: true,
                        content:url
                    });
                    layer.full(index);
                }else if (layEvent === 'del') {
                    del(data.id,obj);
                }
            });

            let del = function(id,obj) {
                layer.confirm('请确认是否删除角色',{icon: 3, title:'确认操作'},function (index) {
                    $.ajax({
                        type:"POST",
                        url:"/admin/api/role/"+id,
                        data:{_method:"delete"},
                        dataType:"json",
                        success: function(response){
                            if (response.code === 0){
                                layer.msg(response.message,{icon:1});
                                obj.del();
                            }else{
                                layer.msg(response.message,{icon:6});
                            }
                        }
                    });
                    layer.close(index);
                });

            };

            $('#create').click(function () {
                layer.open({
                    type:2,
                    title:'添加角色',
                    area:['500px','300px'],
                    content:'/admin/role'
                });
            });
        })
    </script>
@endsection



